<template>
	<div id='tmpl'> 
		<div id='desc'>
			<!--图片详情-->
			<div class='title'>
				<h4>{{photoinfo.title}}</h4>
				<p>{{photoinfo.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}} {{photoinfo.click}}次浏览</p>
				<p class='line'></p>	
			</div>
				<!--缩略图-->
			<div class="mui-content">
		        <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<template>
						 	 <vue-preview  :slides="list" @close="handleClose"></vue-preview>
						</template>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<template>
						 	 <vue-preview  :slides="list2" @close="handleClose"></vue-preview>
						</template>
		            </li>
		        </ul> 
			</div>

			<!--图片详情 摘要部分-->
			<p class='zhaiyao'>{{photoinfo.content}}</p>	
		</div>

		<!--2.0 集成评论组件-->
		<div id='comment'>
			<comment :id='id'></comment>
		</div>
	</div>
</template>
<script>
		// 1.0 导入评论组件
		import comment from '../subcom/comment.vue'
		// import common from '../../kits/common.js'
		import {Toast} from 'mint-ui';

		export default{
			components:{
				comment //2.0.1 注册评论组件
			},
			data(){
				return{
					id:0, //图片的id
					photoinfo:{
						"id":52,
						'title':'他们被称为“土豪',
						'click':10,
						'add_time':'2015-04-18T06:27:06.000Z',
						'content':'vur-preview点击图片实现预览功能',
					},
			        list: [
			          {
			            src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
			            msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
			            alt: 'picture1',
			            title: 'Image Caption 1',
			            w: 1200,
			            h: 900
			          }],
			        list2:[{
			            src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
			            msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
			            alt: 'picture2',
			            title: 'Image Caption 2',
			            w: 1200,
			            h: 900
			          }
			        ]
				}
			},
			created(){
				this.id=this.$route.params.id;
				// this.getinfo();
			},
			methods:{
				handleClose () {
			        console.log('close event')
			    },
				// 1.0 动态获取图片数据格式
				// getinfo(){
				// 	var url=common.apidomain+'/api/getimageInfo/'+this.id;
				// 	this.$http.get(url).then(function(res){
				// 		var body=res.body;
				// 		if(body.status!=0){
				// 			Toast(body.message);
				// 			return;
				// 		}
				// 		this.list=body.message;
				// 	})
				// }
			}
		}
</script>
   <!-- 这里这能用less -->
<style scoped> 
	#desc .zhaiyao{
		padding-left:5px;
	}
	#desc .title{
		padding:5px;
	}
	#desc .title h4{
		color:rgb(38,162,255);
	}
	#desc .title p{
		color:rgba(0,0,0,0.4);
		margin-top: 6px;
	}
	#desc .title .line{
		height: 1px;
		width: 100%;
		border-bottom: 1px solid rgba(0,0,0,0.2);
	}
	.mui-content,.mui-content ul{
		background-color:#fff;
	}
	.mui-grid-view.mui-grid-9 .mui-table-view-cell{
		border-right:0px;
		border-bottom:0px;
	}
	.mui-grid-view.mui-grid-9{
		border-top:1px;
		border-left:0px;
	}
	.mui-grid-view.mui-grid-9 {
		border-left:0px;
		border-top:0px;
	}
	.mui-grid-view.mui-grid-9 .mui-table-view-cell[data-v-8da94f88]{
		width:45%;
	}
	.mui-content>.mui-table-view:first-child{
		margin-top:0px;
	}
	.mui-content img{
		width: 100px;
		height: 100px;
	}
	#desc zhaiyao{
		margin-left:5px;
	}
</style>
<style less>
	.mui-table-view-cell figure{
		margin: 0;
	}
</style>